import React from 'react'
import { Grid,Icon } from 'semantic-ui-react'
import 'semantic-ui-css/semantic.min.css'
import { Route, Link } from "react-router-dom";
import './main.css'
import Home from './home/home'
import Info from './info/info'
import Chat from './chat/chat'
import My from './my/my'
import List from './home/list'
class Menu extends React.Component{
    // 封装一个菜单组件
    render(){
        const {to,current,iconName,menuName}=this.props
        return (
            <Route
              path={to}
              exact={current}
              children={({ match }) => (
                  // Route都是成组出现的每组中的第一个Route加上exact这个属性来表示这组路由需要精确匹配
                  // 这个路由组件在下面调用了四次生成的这四个路由被放到一个组里进行统一管理，match是该组中谁被点击谁就会得到match这个参数，所以可以通过match来做当前点击高亮
                  // Route和Link配合使用就是用来点击改变当前路由
                  // path={to}这个属性是为了保证match只会出现在被点击的那个路由中，属性path就是在组中的各个路由被点击的时候用来做一种映射关系
                <Link to={to}>
                  <div l={JSON.stringify(match)} className={`placeholder ${match ? "active" : ""}`}>
                    <Icon name={iconName}/>
                    <div>{menuName}</div>                                                     
                  </div>
                </Link>
              )}
            />
          );
    }
}
class Main extends React.Component{
 constructor(props){
     super(props)
     this.state={

     }
 }
 render(){
     return(
<div>
    <div className='main-content'>
    {/*Route和component配合使用就是用来当路由改变的时候去匹配到当前路由对应的组件
     这里的四个路由又是一个组里的路由改变的时候被组里面的谁匹配到了就调用谁的组件来填充到这个位置
    */}
        <Route exact path="/home" component={Home} />
        <Route path="/home/info" component={Info} />
        <Route path="/home/chat" component={Chat} />
        <Route path="/home/my" component={My} />
        <Route path="/home/list" component={List} />
    </div>
    <div className='main-menu'>
        <Grid centered padded >
        <Grid.Row columns={4} divided >
            <Grid.Column>
                <Menu to='/home' current={true} menuName='主页' iconName='user secret'/> {/*current={true}表示给组里面的第一个路由加上exact属性（默认这样做）*/}
            </Grid.Column>
            <Grid.Column>
                <Menu to='/home/info' menuName='资讯' iconName='window restore'/>
            </Grid.Column>
            <Grid.Column>
                <Menu to='/home/chat' menuName='微聊' iconName='microchip'/>
            </Grid.Column>
            <Grid.Column>
                <Menu to='/home/my' menuName='我的' iconName='window maximize'/>
            </Grid.Column>
        </Grid.Row>
    </Grid>
    </div>
</div>
     )
 }
}
export default Main